Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout::Flex - Component implementation #2751

Open
wants to merge 38 commits into
base: main
Choose a base branch
from

Conversation

didoo
Copy link
Contributor

@didoo didoo commented Mar 6, 2025

📌 Summary

This PR implements the Flex component (HDS-4531) in the context of the wider initiative for spacing/layout/pages components/helpers (HDS-4527).

There is an equivalent PR to implement a grid component: #2756

🛠️ Detailed description

In this PR I have:

  • Implemented the Hds::Layout::Flex component
  • Added significant use cases and examples to the showcase page for Flex
  • Added extensive integration tests for the component

The component documentation is done in #2764

👉 👉 👉 Preview: https://hds-showcase-git-flex-component-implementation-hashicorp.vercel.app/layouts/flex

🔗 External links

Jira ticket: https://hashicorp.atlassian.net/browse/HDS-4635
Project plan: HDS Project Plan - Flex/Grid components


👀 Component checklist

💬 Please consider using conventional comments when reviewing this PR.

Copy link

vercel bot commented Mar 6, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
hds-showcase ✅ Ready (Inspect) Visit Preview Mar 19, 2025 9:47am
hds-website ✅ Ready (Inspect) Visit Preview Mar 19, 2025 9:47am

@didoo didoo force-pushed the flex-component-implementation branch from 363c966 to 240d50c Compare March 6, 2025 21:16
@didoo didoo changed the title Flex - Component implementation [WIP] Layout::Flex - Component implementation Mar 10, 2025
Copy link
Contributor

@dchyun dchyun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking really great, and covers a lot of use cases. I added a couple suggestions that would cover some additional flex box features. If we are trying to keep the component less complex for consumers then may not need the features I'm suggesting.

Copy link
Contributor

@KristinLBradley KristinLBradley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is looking quite good overall. What do you think about adding @width and @height options though?

Or perhaps those could be considered together with break points & responsiveness in a phase 2 release? (I guess we already discussed doing these as a follow-on, sorry.)

@didoo didoo changed the title [WIP] Layout::Flex - Component implementation Layout::Flex - Component implementation Mar 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants